<template>
	<view>
		<view class="title">
			<h3 align="center">phq9测试分析</h3>
		</view>
		<canvas canvas-id="myid" id="myid" class="charts" @tap="tap" />
		<view class="analysis">
			<h4>分析</h4>
			<p>
				经分析后为用户提供可行性建议，“放松心态、积极自我调剂”
				<br>
				建议：放松心态、适当进行体育运动，转移注意力可以战胜轻度抑郁
			</p>
		</view>
		<view class="advice">
			<h4>建议</h4>
			<p>
				经分析后为用户提供可行性建议，“放松心态、积极自我调剂”
				<br>
				建议：放松心态、适当进行体育运动，转移注意力可以战胜轻度抑郁
			</p>
		</view>
	</view>
</template>
<script>
	import uCharts from '@/qiun-data-charts_2.4.3-20220505/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {};
	export default {
		data() {
			return {
				cWidth: 750,
				cHeight: 500
			};
		},
		onReady() {
			//这里的 750 对应 css .charts 的 width
			this.cWidth = uni.upx2px(750);
			//这里的 500 对应 css .charts 的 height
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["焦虑", "紧张", "自卑", "烦躁", "痛苦", "低落"],
						series: [{
							name: "目标值",
							data: [26, 33, 31, 30, 13, 30]
						}]
					};
					this.drawCharts('myid', res);
				}, 500);
			},
			drawCharts(id, data) {
				const ctx = uni.createCanvasContext(id, this);
				uChartsInstance[id] = new uCharts({
					type: "radar",
					context: ctx,
					width: this.cWidth,
					height: this.cHeight,
					categories: data.categories,
					series: data.series,
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group"
						}
					}
				});
			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			}
		}
	};
</script>
<style scoped>
	.charts {
		width: 750rpx;
		height: 500rpx;
	}

	.title {
		margin-top: 30px;
	}
	.analysis{
		margin-top: 20px;
	}
	.advice{
		margin-top: 20px;
	}
</style>
